/**
 * witUI 跨平台UI框架
 * @date: 2022.03.23
 * @author：taiping
 *@version: 1.1
 */
/*===========================初始化===========================*/


:root{
    --primary: #1890ff;
    --success: #52c41a;
    --warning: #fa8c16;
    --danger: #f5222d;
    --info: #434343;
}
@media all and (max-width: 480px) {
    article{
        -webkit-flex: 1 100%;
        -moz-flex: 1 100%;
        -ms-flex: 1 100%;
        flex: 1 100%;
    }
    :root {
        --xs: 6rpx;
        --sm: 12rpx;
        --df: 20rpx;
        --xl: 25rpx;
        --font-xs: 20rpx;
        --font-sm: 28rpx;
        --font-df: 35rpx;
        --font-xl: 45rpx;
        --font-xxl: 55rpx;
    }
}
@media all and (max-width: 1100px) and (min-width: 480px) {
    :root {
        --xs: 3rpx;
        --sm: 6rpx;
        --df: 10rpx;
        --xl: 15rpx;
        --font-xs: 5rpx;
        --font-sm: 10rpx;
        --font-df: 20rpx;
        --font-xl: 30rpx;
        --font-xxl: 40rpx;
    }
}
@media all and (min-width: 1100px) {
    section {
        width: 1100px;
        margin: 0 auto;
    }
    :root {
        --xs: 4rpx;
        --sm: 8rpx;
        --df: 12rpx;
        --xl: 17rpx;
        --font-xs: 12rpx;
        --font-sm: 34rpx;
        --font-df: 47rpx;
        --font-xl: 50rpx;
        --font-xxl: 57rpx;
    }
}

body {
    font-size: var(--font-sm);
    color: #222222;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    height: auto;
    width: 100%;
    margin: 0;
}

view,scroll-view,swiper,button,input,textarea,label,navigator,
image {
    box-sizing: border-box;
}
.round {
    border-radius: 5000rpx;
}
.radius {
    border-radius: 6rpx;
}
.fixed {
    position: fixed;
    z-index: 9999;
}
.top {
    top: 0;
}
.left {
    left: 0;
}
.bottom {
    bottom: 0;
}
.right {
    right: 0;
}
.content {
    padding: var(--status-bar-height) var(--df);
    padding-top: 45px;
    padding-bottom: 60px;
}
/*===========================布局===========================*/
/*  -- flex弹性布局 -- */

.flex {
    display: flex;
}
.basis-xs {
    flex-basis: 20%;
}
.basis-sm {
    flex-basis: 40%;
}

.basis-df {
    flex-basis: 50%;
}
.basis-lg {
    flex-basis: 60%;
}
.basis-xl {
    flex-basis: 80%;
}
.flex-sub {
    flex: 1;
}
.flex-twice {
    flex: 2;
}
.flex-treble {
    flex: 3;
}
.flex-direction {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.align-start {
    align-items: flex-start;
}
.align-end {
    align-items: flex-end;
}
.align-center {
    align-items: center;
}
.align-stretch {
    align-items: stretch;
}
.self-start {
    align-self: flex-start;
}
//.self-center {
//    align-self: self-center;
//}
.self-end {
    align-self: flex-end;
}
.self-stretch {
    align-self: stretch;
}
.align-stretch {
    align-items: stretch;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
/* grid布局 */
.grid {
    display: flex;
    flex-wrap: wrap;
}
.grid.grid-square {
    overflow: hidden;
}
.grid.grid-square .cu-tag {
    position: absolute;
    right: 0;
    top: 0;
    border-bottom-left-radius: 6rpx;
    padding: 6rpx 12rpx;
    height: auto;
    background-color: rgba(0, 0, 0, 0.5);
}
.grid.grid-square>view>text[class*="icon-"] {
    font-size: 52rpx;
    position: absolute;
    color: #8799a3;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.grid.grid-square>view {
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 6rpx;
    position: relative;
    overflow: hidden;
}
.grid.grid-square>view.bg-img image {
    width: 100%;
    height: 100%;
    position: absolute;
}
.grid.col-1.grid-square>view {
    padding-bottom: 100%;
    height: 0;
    margin-right: 0;
}
.grid.col-2.grid-square>view {
    padding-bottom: calc((100% - 20rpx)/2);
    height: 0;
    width: calc((100% - 20rpx)/2);
}
.grid.col-3.grid-square>view {
    padding-bottom: calc((100% - 40rpx)/3);
    height: 0;
    width: calc((100% - 40rpx)/3);
}
.grid.col-4.grid-square>view {
    padding-bottom: calc((100% - 60rpx)/4);
    height: 0;
    width: calc((100% - 60rpx)/4);
}
.grid.col-5.grid-square>view {
    padding-bottom: calc((100% - 80rpx)/5);
    height: 0;
    width: calc((100% - 80rpx)/5);
}
.grid.col-2.grid-square>view:nth-child(2n),
.grid.col-3.grid-square>view:nth-child(3n),
.grid.col-4.grid-square>view:nth-child(4n),
.grid.col-5.grid-square>view:nth-child(5n) {
    margin-right: 0;
}
.grid.col-1>view {
    width: 100%;
}
.grid.col-2>view {
    width: 50%;
}
.grid.col-3>view {
    width: 33.33%;
}
.grid.col-4>view {
    width: 25%;
}
.grid.col-5>view {
    width: 20%;
}
.grid.gap-xs>view {
    grid-gap: var(--xs);
}
.grid.gap-sm>view {
    grid-gap: var(--sm);
}
.grid.gap-df>view {
    grid-gap: var(--df);
}
.grid.gap-xl>view {
    grid-gap: var(--xl);
}
/*=================
        瀑布流
=================*/
.column {
    column-count: 2;
}
.column-item {
    break-inside: avoid;
    margin-right: 1%;
    width: 100%;
    height: auto;
    margin-bottom: 20rpx;
}
.line-two{
    word-break:break-all;
    display:-webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient:vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp:2; /**显示的行数**/
    overflow:hidden; /**隐藏超出的内容**/
}
/*===========================边距===========================*/
.margin-xs {
    margin: var(--xs);
}
.margin-sm {
    margin: var(--sm);
}
.margin-df {
    margin: var(--df);
}
.margin-xl {
    margin: var(--xl);
}
.margin-left-xs {
    margin-left: var(--xs);
}
.margin-left-sm {
    margin-left: var(--sm);
}
.margin-left-df {
    margin-left: var(--df);
}
.margin-xl {
    margin-left: var(--xl);
}
.margin-right-xs {
    margin-right: var(--xs);
}
.margin-right-sm {
    margin-right: var(--sm);
}
.margin-right-df {
    margin-right: var(--df);
}
.margin-right-xl {
    margin-right: var(--xl);
}
.margin-top-xs {
    margin-top: var(--xs);
}
.margin-top-sm {
    margin-top: var(--sm);
}
.margin-top-df {
    margin-top: var(--df);
}
.margin-top-xl {
    margin-top: var(--xl);
}
.margin-bottom-xs {
    margin-bottom: var(--xs);
}
.margin-bottom-sm {
    margin-bottom: var(--sm);
}
.margin-bottom-df {
    margin-bottom: var(--df);
}
.margin-bottom-xl {
    margin-bottom: var(--xl);
}
.padding-xs {
    padding: var(--xs);
}
.padding-sm {
    padding: var(--sm);
}
.padding-df {
    padding: var(--df);
}
.padding-xl {
    padding: var(--xl);
}
.padding-left-xs {
    padding-left: var(--xs);
}
.padding-left-sm {
    padding-left: var(--sm);
}
.padding-left-df {
    padding-left: var(--df);
}
.padding-xl {
    padding-left: var(--xl);
}
.padding-right-xs {
    padding-right: var(--xs);
}
.padding-right-sm {
    padding-right: var(--sm);
}
.padding-right-df {
    padding-right: var(--df);
}
.padding-right-xl {
    padding-right: var(--xl);
}
.padding-top-xs {
    padding-top: var(--xs);
}
.padding-top-sm {
    padding-top: var(--sm);
}
.padding-top-df {
    padding-top: var(--df);
}
.padding-top-xl {
    padding-top: var(--xl);
}
.padding-bottom-xs {
    padding-bottom: var(--xs);
}
.padding-bottom-sm {
    padding-bottom: var(--sm);
}
.padding-bottom-df {
    padding-bottom: var(--df);
}
.padding-bottom-xl {
    padding-bottom: var(--xl);
}
/*===========================字体大小===========================*/
.font-size-xs {
    font-size: var(--font-xs);
}
.font-size-sm {
    font-size: var(--font-sm);
}
.font-size-df {
    font-size: var(--font-df);
}
.font-size-xl {
    font-size: var(--font-xl);
}
.font-size-xxl {
    font-size: var(--font-xxl);
}
/*===========================文本===========================*/
.text-center {
    text-align: center;
}
/*单行多余隐藏*/
.text-sing {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
/*多行多余隐藏*/
.text-lines {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/*===========================颜色===========================*/
.color-red {
    color: #e03131;
}
.color-green {
    color: #37b24d;
}
.color-blue {
    color: #339af0;
}
.color-lightBlue {
    color: #03a9f4;
}
.color-pink {
    color: #e64980;
}
.color-grape {
    color: #be4bdb;
}
.color-violet {
    color: #7048e8;
}
.color-indigo {
    color: #4c6ef5;
}
.color-cyan {
    color: #3bc9db;
}
.color-teal {
    color: #38d9a9;
}
.color-lime {
    color: #94d82d;
}
.color-yellow {
    color: #ffd43b;
}
.color-orange {
    color: #fd7e14;
}
.color-grey {
    color: #9e9e9e;
}
.color-white {
    color:white;
}
.color-black {
    color:black;
}
.bg-grey{
    background-color: #fafafa;
}
.bg-white {
    background-color:#ffffff;
}
.bg-black{
    color: white;
    background-color: black;
}
.bg-red {
    color: white;
    background-color: #e03131;
}
.bg-green {
    color: white;
    background-color: #37b24d;
}
.bg-blue {
    color: white;
    background-color: #339af0;
}
.bg-lightBlue {
    color: white;
    background-color: #03a9f4;
}
.bg-pink {
    color: white;
    background-color: #e64980;
}
.bg-grape {
    color: white;
    background-color: #be4bdb;
}
.bg-violet {
    color: white;
    background-color: #7048e8;
}
.bg-indigo {
    color: white;
    background-color: #4c6ef5;
}
.bg-cyan {
    color: white;
    background-color: #3bc9db;
}
.bg-teal {
    color: white;
    background-color: #38d9a9;
}
.bg-lime {
    color: white;
    background-color: #94d82d;
}
.bg-yellow {
    color: white;
    background-color: #ffd43b;
}
.bg-orange {
    color: white;
    background-color: #fd7e14;
}
.bg-grey1 {
    color: white;
    background-color: #9e9e9e;
}
/*边框*/
.border-solid-xs {
    border: 1rpx solid #000000;
}
.border-solid-sm {
    border: 2rpx solid #000000;
}
.border-solid-df {
    border: 4rpx solid #000000;
}
